<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
<title>Insert title here</title>
<style>
body{
   BACKGROUND-COLOR: #d6dff7;
}
table .t1 { 
        margin-top:10px;  
        margin-left:20px;  
        margin-right:20px;  
        margin-bottom:5px;  
        #background-color: #FFF;  
        #background:#EEF4F9;  
        #border: none;  
        border: 1;  
        #color:#003755;  
        border-collapse:collapse;  
        font: 14px  "宋体";  
}  
  
table.t1 th.big{  
        width:150px;
        background:#7CB8E2;  
        color:#fff;  
        padding:6px 4px;
        text-align:left;
}
table.t1 th.small{ 
         width:70px; 
        background:#7CB8E2;  
        color:#fff;  
        padding:6px 4px;
        text-align:left;
}   
table.t1 td{ 
        background:#C7DDEE none repeat-x scroll center left;  
        color:#000;  
        padding:4px 2px;  
}  
  
table.t1 a{  
        text-decoration:none;  
        height:1em;  
}  
  
table.t1 a:link, table.t1  a:visited{  
        color:#3366CC;  
}  
table.t1  a:hover{                                      /* 鼠标经过时 */  
        color:#B50000;  
        text-decoration:underline;  
} 
.check{
   zoom:140%;
   margin-left:10px;
} 
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="js/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/kkpager_orange.css" />
<script type="text/javascript" src="js/dsdialog.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<title>朋友</title>
<script type="text/javascript">
var totalPage = 0;//总页码
var totalRecords = 0;//总记录数
var pageNo = 1;//开始页码
var pageCount = 10;//每页条数
$(function(){
	$.getJSON("FriendAction_selectCount",function(result){//获取条数
		totalRecords = parseInt(result);	
		getFriend(((pageNo-1)*pageCount),pageCount);//获取第一页信息
	});
});
//获取朋友信息
function getFriend(start,end){
	if(totalRecords>0){//判断是否有条数
	 $.ajax({
			type: "get",
			url: "FriendAction_getFriend?start="+start+"&end="+end,
			dataType: 'json',
			async:false,
			success: function(result) {
				var msg = "<tr id='title'><th class='small'>编  号</th><th class='big'>姓  名</th><th class='small'>性  别</th><th class='small'>年 龄</th><th class='big'>生 日</th><th class='big'>电话号码</th><th class='big'>地 址</th><th class='big'>操 作</th></tr>";
				$.each(result,function(i,item){
					msg+="<tr><td class='checkParent'><input class='check' type='checkbox' value='"+item.id+"'>";
					msg+="<td class='name'>"+item.name+"</td><td>"+item.sex+"</td><td>"+item.age+"</td>";
					msg+="<td>"+item.attr+item.birthday.substring(0,10)+"</td><td>"+item.telephone+"</td><td>"+item.address+"</td>";
					msg+="<td><a class='update' href='javascript:void(0)'>修改</a>&nbsp;<a class='deleteFri'  href='javascript:void(0)'>删除</a></td></tr>"	
				});
				 $(".t1").html(msg);	
			}  
	});
	 producePage();//生成分页导航
	  //加载事件
      $(".deleteFri").one("click",function(){
    	  var name = $(this).parent().siblings(".name").text();
    	  var id = $(this).parent().siblings(".checkParent").children().val();
    	  $.getJSON("FriendAction_deleteFriend?id="+id,function(data){
    		if(data=="1"){
    			totalRecords=totalRecords-1;
    			getFriend(((pageNo-1)*pageCount),pageCount);
    		}else{
    			alert("删除失败");
    		}
    	});
	   });
	}
}
//生成分页导航
function producePage(){
	    totalPage = Math.ceil(totalRecords/pageCount);
		kkpager.generPageHtml({
			pno : pageNo,
			//总页码
			total : totalPage,
			//总数据条数
			totalRecords : totalRecords,
			mode : 'click',//默认值是link，可选link或者click
			click : function(n){
				// do something
				//手动选中按钮
				this.selectPage(n);
				pageNo = n;
				getFriend(((n-1)*pageCount),pageCount);
			}
		    /*
			,lang				: {
				firstPageText			: '首页',
				firstPageTipText		: '首页',
				lastPageText			: '尾页',
				lastPageTipText			: '尾页',
				prePageText				: '上一页',
				prePageTipText			: '上一页',
				nextPageText			: '下一页',
				nextPageTipText			: '下一页',
				totalPageBeforeText		: '共',
				totalPageAfterText		: '页',
				currPageBeforeText		: '当前第',
				currPageAfterText		: '页',
				totalInfoSplitStr		: '/',
				totalRecordsBeforeText	: '共',
				totalRecordsAfterText	: '条数据',
				gopageBeforeText		: '&nbsp;转到',
				gopageButtonOkText		: '确定',
				gopageAfterText			: '页',
				buttonTipBeforeText		: '第',
				buttonTipAfterText		: '页'
			}*/
		});
}
</script>
</head>     
<body>  
<center>   
   <table border="1"  class="t1">  
     <tr id='title'><th class='small'>编  号</th><th class='big'>姓  名</th><th class='small'>性  别</th><th class='small'>年 龄</th><th class="big">生 日</th><th class='big'>电话号码</th><th class='big'>地 址</th><th class='big'>操 作</th></tr>
   </table>  
   <div style="width:1000px;margin:10px auto;">
      <div id="kkpager"></div>
   </div>
</center>
</body>  
</html>